<template>
  <div class="app-container">
    <el-tabs v-model="activeTab" @tab-click="handleTabChange">
      <el-tab-pane label="核销明细（账单）" name="bill" />
      <el-tab-pane label="核销明细（租户）" name="tenant" />
    </el-tabs>
    <!-- 查询表单 -->
    <el-form :model="currentQuery" :inline="true" style="margin-top: 32px">
      <el-form-item label="月份" prop="month" required>
        <el-date-picker
          v-model="currentQuery.month"
          type="month"
          format="YYYY-MM"
          value-format="YYYY-MM"
          placeholder="选择月份"
          style="width: 120px"
        />
      </el-form-item>
      <el-form-item label="载体" prop="zt" required>
        <el-select v-model="currentQuery.zt" placeholder="请选择载体" style="width: 180px">
          <el-option v-for="item in ztOptions" :key="item.nr" :label="item.nr" :value="item.nr" />
        </el-select>
      </el-form-item>
      <el-form-item label="租户名称" prop="qymc">
        <el-input v-model="currentQuery.qymc" placeholder="请输入租户名称" style="width: 180px" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 核销明细（账单）列表 -->
    <el-table
      v-if="activeTab === 'bill'"
      v-loading="paymentLoading"
      :data="paymentList"
      border
      highlight-current-row
      style="margin-top: 16px"
    >
      <el-table-column prop="zt" label="载体" align="center" />
      <el-table-column prop="qymc" label="租户名称" align="center" width="320" />
      <el-table-column prop="hkje" label="应收金额" align="center" />
      <el-table-column prop="ysje" label="核销金额" align="center" />
      <el-table-column prop="wsje" label="未收金额" align="center" />
      <el-table-column label="账单生成日期" align="center">
        <template #default="scope">
          {{ scope.row.hkrq ? parseTime(scope.row.hkrq,"{y}-{m}-{d}") : '-' }}
        </template>
      </el-table-column>
      <el-table-column label="核销日期" align="center">
        <template #default="scope">
          {{ scope.row.sjrq ? parseTime(scope.row.sjrq,"{y}-{m}-{d}") : '-' }}
        </template>
      </el-table-column>
      <el-table-column label="计费类型" align="center">
        <template #default="scope">
          <span v-if="scope.row.jflx === 1">后付费</span>
          <span v-else-if="scope.row.jflx === 2">预充值</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column prop="hkzt" label="核销状态" align="center" />
    </el-table>
    <pagination
      v-if="activeTab === 'bill' && paymentTotal > 0"
      :total="paymentTotal"
      v-model:page="currentQuery.pageNum"
      v-model:limit="currentQuery.pageSize"
      @pagination="fetchPaymentList"
    />

    <!-- 核销明细（租户）列表 -->
    <el-table
      v-if="activeTab === 'tenant'"
      v-loading="tenantLoading"
      :data="tenantList"
      border
      highlight-current-row
      style="margin-top: 16px"
    >
      <el-table-column prop="zt" label="载体" align="center" />
      <el-table-column prop="qymc" label="租户名称" align="center" width="320" />
      <el-table-column prop="ysjeSum" label="核销金额" align="center" />
      <el-table-column prop="month" label="核销月份" align="center" />
    </el-table>
    <pagination
      v-if="activeTab === 'tenant' && tenantTotal > 0"
      :total="tenantTotal"
      v-model:page="currentQuery.pageNum"
      v-model:limit="currentQuery.pageSize"
      @pagination="fetchTenantList"
    />
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
import { selectBillingHxm, selectBillingHxmJe } from "@/api/bill/index";
import { parseTime } from "@/utils/ruoyi.js";
import { selectzt } from "@/api/carrier/ammeter";



const activeTab = ref('bill');
const currentQuery = ref({
  pageNum: 1,
  pageSize: 10,
  qymc: undefined,
  zt: '',
  month: getLastMonthStr(),
});
const paymentList = ref([]);
const paymentTotal = ref(0);
const paymentLoading = ref(false);
const tenantList = ref([]);
const tenantTotal = ref(0);
const tenantLoading = ref(false);
const ztOptions = ref([]);

function getLastMonthStr() {
  const d = new Date();
  d.setDate(1); // 设置为当月第一天
  // d.setMonth(d.getMonth() );

  console.log(parseTime(d, "{y}-{m}"),parseTime(d),d.getMonth());
  return parseTime(d, "{y}-{m}");
}

function handleTabChange(tab) {
  currentQuery.value.pageNum = 1;
  if (tab.name === 'bill') {
    fetchPaymentList();
  } else {
    fetchTenantList();
  }
}

function handleQuery() {
  currentQuery.value.pageNum = 1;
  if (activeTab.value === 'bill') {
    fetchPaymentList();
  } else {
    fetchTenantList();
  }
}

function resetQuery() {
  currentQuery.value.month = getLastMonthStr();
  currentQuery.value.qymc = undefined;
  currentQuery.value.zt = ztOptions.value[0]?.nr || '';
  currentQuery.value.pageNum = 1;
  if (activeTab.value === 'bill') {
    fetchPaymentList();
  } else {
    fetchTenantList();
  }
}

function fetchPaymentList() {
  paymentLoading.value = true;
  selectBillingHxm(currentQuery.value).then(res => {
    paymentList.value = res.data?.list || [];
    paymentTotal.value = res.data?.total || 0;
    paymentLoading.value = false;
  }).catch(() => {
    paymentLoading.value = false;
  });
}

function fetchTenantList() {
  tenantLoading.value = true;
  // 校验必填
  if (!currentQuery.value.zt || !currentQuery.value.month) {
    tenantList.value = [];
    tenantTotal.value = 0;
    tenantLoading.value = false;
    return;
  }
  selectBillingHxmJe(currentQuery.value).then(res => {
    tenantList.value = res.data?.list || [];
    tenantTotal.value = res.data?.total || 0;
    tenantLoading.value = false;
  }).catch(() => {
    tenantLoading.value = false;
  });
}

function fetchZtOptions() {
  selectzt({ pageNum: 1, pageSize: 10, lxbh: 1 }).then(res => {
    ztOptions.value = res.data?.list || [];
    if (ztOptions.value.length > 0 && !currentQuery.value.zt) {
      currentQuery.value.zt = ztOptions.value[0].nr;
      fetchPaymentList();
    }
  });
}

onMounted(() => {
  fetchZtOptions();
  
});
</script>